<template>
    <div class="detail-container">
      <div class="v-items">
        <vote-item :list="aList" tip="true" photo-bg2="true"></vote-item>
      </div>
      <div>
        <load-more :show-loading="false" tip="比赛照片" background-color="orange"></load-more>
      </div>
      <div class="v-photo-flex">
        <div class="v-photo-bg holder" v-for="(item, index) in list" :key="index">
          <img class="previewer-demo-img" :src="item.src" width="100%" @click="show(index)">
        </div>
        <div v-transfer-dom>
          <previewer :list="list" ref="previewer" :options="options" @on-index-change="logIndexChange"></previewer>
        </div>
      </div>
      <div class="de-btns">
        <div class="de-btn">
          <label>我要投票</label>
        </div>
      </div>
    </div>
</template>

<script>
import VoteItem from '../pages/voteItem'
import { LoadMore, Previewer, TransferDom } from 'vux'
// import axios from 'axios'
const twoList = [{
  id: 1,
  name: '尼古拉斯',
  num: '001',
  voteNum: '1234'
}]
const lists = twoList.map(item => ({
  id: item.id,
  name: item.name,
  num: item.num,
  voteNum: item.voteNum
}))
export default {
  directives: {
    TransferDom
  },
  components: {
    LoadMore,
    VoteItem,
    Previewer
  },
  name: 'detail',
  mounted () {
    // this.getList()
  },
  methods: {
    // getList () {
    //   console.log(123)
    //   console.log(this.$store.state.sessID)
    //   axios.get('http://www.wecozhiku.com/gsh5/index.php/Home/JshApi/index' + this.sessID).then(res => {
    //     this.aList = res.data
    //   })
    //   console.log(this.aList)
    // },
    logIndexChange (arg) {
      console.log(arg)
    },
    show (index) {
      console.log(index)
      this.$refs.previewer.show(index)
    }
  },
  data () {
    return {
      sessID: '',
      aList: [],
      getUrl: 'http://www.wecozhiku.com/gsh5/index.php/Home/JshApi/index',
      onlyList: lists,
      list: [{
        // msrc: 'http://ww1.sinaimg.cn/thumbnail/663d3650gy1fplwu9ze86j20m80b40t2.jpg',
        src: 'http://ww1.sinaimg.cn/large/663d3650gy1fplwu9ze86j20m80b40t2.jpg',
        name: 'aa',
        w: 800,
        h: 400
      },
      {
        // msrc: 'http://ww1.sinaimg.cn/thumbnail/663d3650gy1fplwvqwuoaj20xc0p0t9s.jpg',
        src: 'http://ww1.sinaimg.cn/large/663d3650gy1fplwvqwuoaj20xc0p0t9s.jpg',
        name: 'bb',
        w: 1200,
        h: 900
      }, {
        msrc: 'http://ww1.sinaimg.cn/thumbnail/663d3650gy1fplwwcynw2j20p00b4js9.jpg',
        src: 'http://ww1.sinaimg.cn/large/663d3650gy1fplwwcynw2j20p00b4js9.jpg',
        name: 'cc'
      },
      {
        msrc: 'http://ww1.sinaimg.cn/thumbnail/663d3650gy1fplwvqwuoaj20xc0p0t9s.jpg',
        src: 'http://ww1.sinaimg.cn/large/663d3650gy1fplwvqwuoaj20xc0p0t9s.jpg',
        name: 'dd',
        w: 1200,
        h: 900
      }],
      options: {
        getThumbBoundsFn (index) {
          // find thumbnail element
          let thumbnail = document.querySelectorAll('.previewer-demo-img')[index]
          // get window scroll Y
          let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
          // optionally get horizontal scroll
          // get position of element relative to viewport
          let rect = thumbnail.getBoundingClientRect()
          // w = width
          return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
          // Good guide on how to get element coordinates:
          // http://javascript.info/tutorial/coordinates
        }
      }
    }
  }
}
</script>

<!--<style lang="less">-->
  <!--.bg{-->
    <!--position: absolute;-->
  <!--}-->
  <!--.detail-container{-->
    <!--width: 100%;-->
    <!--height: auto;-->
  <!--}-->
  <!--.v-items{-->
    <!--/*height: 150px;*/-->
    <!--margin-top: 60px;-->
  <!--}-->
  <!--.v-photo-flex{-->
    <!--padding: 1%;-->
    <!--display: flex;-->
    <!--justify-content: center;-->
    <!--flex-wrap: wrap;-->
    <!--margin: -30px 0 10px 0;-->
  <!--}-->
  <!--.v-photo-flex .v-photo-bg:after{-->
    <!--flex: auto;-->
  <!--}-->
  <!--.holder{-->
    <!--margin: 2%;-->
  <!--}-->
  <!--.v-photo-bg{-->
    <!-- -webkit-background-size: cover;-->
    <!--background-size: cover;-->
    <!--background-position:center center;-->
    <!--width: 40%;-->
    <!--height: 150px;-->
    <!--border-radius: 10px;-->
    <!--background-image: url(../assets/young/vote-photo-bg@2x.png);-->
  <!--}-->
  <!--.previewer-demo-img{-->
    <!--height: 100%;-->
    <!--border-radius: 10px;-->
  <!--}-->
  <!--.detail{-->
    <!--padding: 34px;-->
    <!--/*margin: 34px;*/-->
  <!--}-->
  <!--.de-btns{-->
    <!--position: absolute;-->
    <!--left: 15%;-->
    <!--width: 70%;-->
    <!--color: wheat;-->
    <!--font-size: 24px;-->
    <!--line-height: 48px;-->
  <!--}-->
  <!--.de-btn{-->
    <!--padding: 5px 0;-->
    <!-- -webkit-background-size: 100%;-->
    <!--background-size: 100%;-->
    <!--width: 100%;-->
    <!--background-image: url(../assets/young/join@2x.png);-->
    <!--background-repeat: no-repeat;-->
  <!--}-->
  <!--/*vote-item  change*/-->
  <!--.vote-item .inner{-->
    <!--flex-direction: column;-->
  <!--}-->
  <!--.inner .items{-->
    <!--width: 100%;-->
    <!--justify-content: space-around;-->
    <!--flex-direction: row;-->
    <!--margin-bottom: 10px;-->
  <!--}-->
  <!--.vote-item .vote-btn{-->
    <!--display: none;-->
  <!--}-->
  <!--/*weui  change*/-->
  <!--.weui-loadmore_line .weui-loadmore__tips{-->
    <!--color: orange!important;-->
    <!--background-color: #fff;-->
    <!-- -webkit-border-radius: 5px;-->
    <!-- -moz-border-radius: 5px;-->
    <!--border-radius: 5px;-->
    <!--margin: 0 20px;-->
    <!--padding: 0.4em 1.5em!important;-->
    <!--top: -1.2em!important;-->
  <!--}-->
  <!--.vux-loadmore.weui-loadmore_line:before, .vux-loadmore.weui-loadmore_line:after {-->
    <!--border-top: 1px solid orange!important;-->
  <!--}-->
<!--</style>-->
